<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }

        #app {
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
            background-color: rgb(100, 100, 100);
            width: 330px;
            height: 400px;
        }
    </style>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <title>ChatGPT(由GPT-3开放接口实现)</title>
    <script src="./js/axios.min.js"></script>
</head>

<body background="./img/background.jpg" style="background-size: cover;">
    <div id="app">
        <div style="display: flex;justify-content: center;align-items: center;color:#eee;">
            ChatGPT持续型聊天AI
        </div>
        <div style="display: flex;justify-content: center;align-items: center;">
            <textarea id="res" cols="100" rows="20"></textarea>
        </div>
        <div style="color:#eee;">
            请输入需要查询的内容：<br />(使用/help指令获取更多帮助)
        </div>
        <div>
        </div>
        <div style="display: flex;justify-content: left;align-items: center;margin: 20">
            <textarea id="inputbox" type="text" v-model="info" cols="100" rows="2" style="margin:15"></textarea>
        </div>
        <div style="display: flex;justify-content: center;align-items: center;margin: 20;">
            <button onclick="ask()" style="width: 100%;">发送<br />文本</button>
        </div>
        <br />
    </div>

    <script>
        window.apikey = "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";
        window.prompt1 = "";
        window.mt = 2048;
        window.tpr = 1;
        window.tp = 1;
        window.fp = 0;
        window.pp = 0;
        window.mode = "true";
        const textarea = window.document.getElementById("res");
        const inputbox = window.document.getElementById("inputbox");
        var histories = "";
        addText("欢迎使用ChatGPT智能AI客服,本项目基于GPT-3接口开发,能够实现与ChatGPT类似的持续性对话功能,AI将记忆并结合语境对话。");
        //window.apikey = prompt("请在输入框内输入并提交您从官方网站获取的apikey:");
        function ask() {
            let intputtext = inputbox.value;
            if (intputtext.startsWith("/")) {
                intputtext = intputtext.substring(1);
                switch (intputtext) {
                    case "help":
                        addText("请输入以下指令来更改ChatGPT的参数:\n\n" +
                            "/apikey  (为每次发送的文本添加前置上下文)\n" +
                            "/prompt  (为每次发送的文本添加前置上下文)\n" +
                            "/maxtoken  (用于控制ChatGPT每次能生成的词数.)\n" +
                            "/tpr (可以用来控制chatbot生成的话的多样性)\n" +
                            "/top  (可以用来控制chatbot生成的话的质量)\n" +
                            "/fp  (可以用来控制chatbot生成的话的“新颖程度”)\n" +
                            "/pp  (用于控制bot产生的句子的长度)\n" +
                            "/info  (用于显示当前各项参数的值)\n" +
                            "/mode  (用于设置是否启用持续对话模式)");
                        break;
                    case "info": addText(
                        "当前的各项参数:\n\n" +
                        "apikey:" + window.apikey + "\n\n" +
                        "Prompt:" + window.prompt1 + "\n\n" +
                        "Max_tokens:" + window.mt + "\n" +
                        "Temperature:" + window.tpr + "\n" +
                        "Top_p:" + window.tp + "\n" +
                        "Frequency_penalty:" + window.fp + "\n" +
                        "Presence_penalty:" + window.pp + "\n" +
                        "mode:" + window.mode + "\n");
                        break;
                    case "apikey": window.apikey = prompt("apikey 请输入从官网获取到的apikey,默认为空"); addText("设置成功"); break;
                    case "prompt": window.prompt1 = prompt("Prompt 请输入要添加的上下文文本,默认为空"); addText("设置成功"); break;
                    case "maxtoken": window.mt = Number(prompt("Max_tokens 请输入ChatGPT每次能生成的词数,默认为2048")); addText("设置成功"); break;
                    case "tpr": window.tpr = Number(prompt("Temperature 请输入一个0到1.0的一位小数,默认为1.0")); addText("设置成功"); break;
                    case "top": window.tp = Number(prompt("Top_p 请输入一个0到1.0的一位小数,默认为1.0")); addText("设置成功"); break;
                    case "fp": window.fp = Number(prompt("Frequency_penalty 请输入一个-2.0到2.0的一位小数,默认为0")); addText("设置成功"); break;
                    case "pp": window.pp = Number(prompt("Presence_penalty 请输入一个-2.0到2.0的一位小数,默认为0")); addText("设置成功"); break;
                    case "mode": window.mode = prompt("mode 输入“true”开启持续对话模式,输入“false”关闭该模式,默认为“true”"); addText("设置成功"); break;
                    default: alert("未知指令");
                }
                inputbox.value = "";
                return;
            }
            if (window.mode == "false") {
                console.log("清空");
                histories = [];
            }
            histories += "\nQ:" + window.prompt1 + intputtext + "。";
            let question = "";
            if (histories.length <= 1000) {
                question = histories;
            } else {
                question = histories.substring(histories.length - 1000)
            }

            console.log(question);
            addText("我说：\n\n" + intputtext);
            textarea.value += '\n正在请求数据......';
            textarea.scrollTop = textarea.scrollHeight;
            axios.post('https://api.openai.com/v1/completions', {
                prompt: question, max_tokens: window.mt, model: "text-davinci-003", temperature: window.tpr,
                top_p: window.tp, frequency_penalty: window.fp, presence_penalty: window.pp
            }, {
                headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + window.apikey }
            }).then(response => {
                let arr = textarea.value.split("\n");
                arr = arr.slice(0, arr.length - 1);
                textarea.value = arr.join("\n");
                let result = response.data.choices[0].text;
                histories += "\n" + result;
                let result1 = result;
                addText("AI导说:\n" + result1.replace('A:', '').replace('A：', ''));
                inputbox.value = "";
            }).catch(error => {
                console.log(error);
                alert("服务器报错:\n" + error);
            });
        }
        function addText(text) {
            textarea.value += "\n" + text + "\n" + "————————————————————";
            textarea.scrollTop = textarea.scrollHeight;
        }
    </script>

</body>

</html>